<template>
    <div id='wrap'>
        <h1>额外的ref解包细节</h1>
        <!-- 遍历 dataApp.value.items 数组 -->
        <div v-for="(item, index) in dataApp.items" :key="index">
            <!-- 显示每个 item 的 message 属性 -->
            {{ index + 1 }}: {{ item.message }}
        </div>

        <!-- 显示 myObject 的属性 -->
        <div>
            <p>Title: {{ dataApp.myObject.title }}</p>
            <p>Author: {{ dataApp.myObject.author }}</p>
            <p>Publisher: {{ dataApp.myObject.publi }}</p>
        </div>
    </div>
</template>
<script lang='ts'>
export default {
    name: 'ref解包',
}
</script>
<script lang='ts' setup>
import { ref, h, reactive } from 'vue';
// const count = ref(0)
// const state = reactive({
//     num: count,
//     countval: count.value
// })
// console.log(state.num, state.countval)

// state.num = 100;
// state.countval = 200;
// console.log(count.value)
// console.log(state.countval)

// const book = reactive([ref('vue 3 guide')])
// console.log(book[0]);
// console.log(book[0].value)
// const map = reactive(new Map([['count', ref(0)]]));
// console.log(map.get('count')?.value)

//嵌套结构中的ref和响应式
const items = ref([
    {
        message: 'foo'
    },
    {
        message: 'bar'
    }
]);

const myObject = ref({
    title: '123',
    author: '456',
    publi: '789'
});

const dataApp = ref({
    items,
    myObject,
})

</script>
<style lang='scss'>
@use '@/assets/common.scss';
</style>